<template>
    <div id="app" style="height:100%;">
        <v-toast v-show="showToast"></v-toast>
        <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="55px" :class="{'hide':$route.path=='/login'}">
            <x-header slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;" :left-options="leftOptions" :title="title" :transition="headerTransition"></x-header>
            <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
                <keep-alive>
                    <router-view v-wechat-title="$route.meta.title" class="router-view"></router-view>
                </keep-alive>
            </transition>
        </view-box>
        <!--其他店内页集合 有过渡效果-->
        <transition mode="out-in" name="custom-classes-transition" :enter-active-class="enterAnimate" :leave-active-class="leaveAnimate">
            <router-view name="subPage"></router-view>
        </transition>
        <div v-transfer-dom>
            <loading v-model="isLoading"></loading>
        </div>
    </div>
</template>

<script>
import {
    Loading,
    ViewBox,
    XHeader,
    TransferDom,
    Tabbar,
    TabbarItem
} from 'vux'
import {
    mapState,
    mapGetters
} from 'vuex'
import rem from './config/rem.js'
import toast from '@/components/toast'
export default {
    directives: {
        TransferDom
    },
    components: {
        Loading,
        ViewBox,
        XHeader,
        Tabbar,
        'v-toast': toast,
        TabbarItem
    },
    name: 'app',
    data() {
        return {
            "enterAnimate": "", //页面进入动效
            "leaveAnimate": "", //页面离开动效,
            "pageName": '首页'
        }
    },
    computed: {
        ...mapGetters([
          'showToast',
      ]),
        ...mapState({
            isLoading: state => state.common.isLoading,
            direction: state => state.common.direction
        }),
        isTabbarDemo() {
            return this.$route.path.split('/').length > 2
        },
        headerTransition() {
            return this.direction === 'forward' ? 'vux-header-fade-in-right' : 'vux-header-fade-in-left'
        },
        leftOptions() {
            return {
                showBack: this.$route.path !== '/home' && this.$route.path !== '/taskTime' && this.$route.path !== '/member' && this.$route.path !== '/project' && this.$route.path !== '/money' && this.$route.path !== '/cost' && this.$route.path !== '/time'
            }
        },
        title() {
            if (this.$route.path === '/home') return '首页'
            if (this.$route.path === '/chose/kind') return '选择贷款种类'
            if (this.$route.path === '/chose/loanway') return '我要还款'
            if (this.$route.path === '/authentication') return '身份验证'
            if (this.$route.path === '/auth/telphone') return '身份验证'
            if (this.$route.path === '/repay/amount') return '录入还款金额'
            if (this.$route.path === '/select/time') return '选择办理时间'
            if (this.$route.path === '/book/success') return '预约成功'
            if (this.$route.path === '/repay/confirm') return '确定贷款余额'
            if (this.$route.path === '/change/loanway') return '变更还款方式'
            if (this.$route.path === '/change/loantime') return '变更还款日'
            if (this.$route.path === '/change/loandeadline') return '变更还款期限'
            if (this.$route.path === '/change') return '我要变更'
            if (this.$route.path === '/get') return '我要领取'
            if (this.$route.path === '/consult') return '我要咨询'
            if (this.$route.path === '/consult/online') return '在线咨询'


            if (/administration\/project/.test(this.$route.path)) return '项目审批'
            if (/administration\/cost/.test(this.$route.path)) return '费用审批'
            if (/administration\/time/.test(this.$route.path)) return '工时审批'
            if (/administration\/money/.test(this.$route.path)) return '借款审批'
            if (/project/.test(this.$route.path) && /detail/.test(this.$route.path)) return '项目详情'
            if (/cost/.test(this.$route.path) && /maindetail/.test(this.$route.path)) return '总报销单详情'
            if (/cost/.test(this.$route.path) && /detail/.test(this.$route.path)) return '费用详情'
            if (/time/.test(this.$route.path) && /detail/.test(this.$route.path)) return '工时详情'
            if (/money/.test(this.$route.path) && /detail/.test(this.$route.path)) return '借款详情'
        }
    }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
@import './common/style/animate.css';
@import './common/font/iconfont.css';
@import './common/style/common';


@font-face {
  font-family: 'icon';  /* project id 172436 */
  src: url('//at.alicdn.com/t/font_w71lovnj7adobt9.eot');
  src: url('//at.alicdn.com/t/font_w71lovnj7adobt9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_w71lovnj7adobt9.woff') format('woff'),
  url('//at.alicdn.com/t/font_w71lovnj7adobt9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_w71lovnj7adobt9.svg#iconfont') format('svg');
}
.icon {
    font-family:"icon" !important;
    font-size:18px;
    font-style:normal;
    color: #ffffff;
}

body {
    background-color: #efeff5;
}

.vux-header {
    width: 100%;
    position: fixed !important;
    left: 0px;
    top: 0px;
    z-index: 100;
}

.weui-tabbar {
    position: fixed !important;
}

.weui-btn {
    margin-top: 20%;
    font-size: 16px !important;
}

.vux-tab-item {
    font-size: .7rem !important;
}

.vux-tab {
    height: 2.3rem !important;
    .vux-tab-item {
        line-height: 2.3rem !important;
    }
}
</style>